<template>
  <div>
      <div class="add-btn">
          <el-button type="primary" round plain size="medium" @click="addRole">新增角色</el-button>
      </div>
      <el-table
      :data="roleList"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="rolename"
        label="角色名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="角色状态">
        <template v-slot="{row:{status}}">
            <el-button type="primary" size="mini" round plain v-if="status===1">正常</el-button>
            <el-button type="primary" size="mini" round plain v-else>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template v-slot="prop">
            <el-button type="primary" size="mini" round plain @click="editRole(prop)">编辑</el-button>
            <el-button type="success" size="mini" round plain @click="deleteRole(prop)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <RoleDialog :boxShow="boxShow" ref="dialog"></RoleDialog>
  </div>
</template>

<script>
import { mapState,mapActions} from "vuex"
import RoleDialog from "./RoleDialog.vue"

export default {
    data() {
        return {
            boxShow: {
                isShow: false
            }
        }
    },
    computed: {
        ...mapState('roles',['roleList'])

    },
    methods: {
        ...mapActions('roles',['initRoleListActions','deleteRoleListActions']),
        ...mapActions('menus',['initMenuListActions']),
        show(prop) {
            console.log(prop);
        },
        addRole() {
            this.boxShow.isShow = true
        },
        editRole(prop) {
            // 将要编辑的数据，传递给子组件
            this.$refs.dialog.roleForm = {...prop.row}
            this.boxShow.isShow = true
        },
        deleteRole(prop) {
            let result = confirm(`确定要删除${prop.row.rolename}角色吗？`)
            if(!result) return
            this.deleteRoleListActions(prop.row.id)
        }
    },
    created() {
        this.initRoleListActions()
        this.initMenuListActions()
    },
    components: {
        RoleDialog
    }
}
</script>

<style scoped>
.add-btn{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
</style>